<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/js/easyui/themes/gray/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="/js/easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="/js/easyui/themes/color.css"/>
    <link rel="stylesheet" type="text/css" href="/js/easyui/themes/color.css"/>
    <script type="text/javascript" src="/js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tree').tree({

                url: '/getMyMenu'

            });
            var index = 0;
            function addPanel(url,title){
                if(!$('#tt').tabs('exists', title)){
                    var dt = new Date();
                    if(url.indexOf("?")>0){
                        url+="&t="+dt.getTime();
                    }else{
                        url+="?t="+dt.getTime();
                    }
                    $('#tt').tabs('add',{
                        title: title,
                        content: '<iframe src="'+url+'" frameBorder="0" border="0"  style="width: 100%; height: 100%;"/>',
                        closable: true
                    });
                }else{
                    $('#tt').tabs('select', title);
                }
            }
            function removePanel(){
                var tab = $('#tt').tabs('getSelected');
                if (tab){
                    var index = $('#tt').tabs('getTabIndex', tab);
                    $('#tt').tabs('close', index);
                }
            }
            $('#tree').tree({
                onClick: function (node) {
                    addPanel(node.url,node.text);
                }
            });
        });
    </script>
</head>
<body class="easyui-layout">


<!--<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>-->
<!--<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>-->
<!--<div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>-->
<div data-options="region:'west',title:'菜单栏',split:true" style="width:170px;">
    <ul id="tree" class="easyui-tree">
    </ul>

</div>
<div id="tt" data-options="region:'center',title:''"  class="easyui-tabs" style="padding:5px;background:#eee;">

    <div title="首页" style="padding:20px;display:none;">
        tab1
    </div>
</div>

</body>
</html>